// @import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap");

$theme: #98cdec;
$theme-active: #42abe8;

* {background:none; outline:none; padding:0; margin:0;
  user-select:none;
  user-zoom:none;
}
div, section, span, p, code {box-sizing:border-box;}
a {text-decoration:none;}
ul li {list-style:none;}

body, html, #app{
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:"Cute Font", cursive;
}
textarea, code, span{
  font-family:"Cute Font", cursive;
}

%srollbar{
  &::-webkit-scrollbar{width:7px;}
  &::-webkit-scrollbar-thumb{width:7px; background:$theme; border: radius 7px;}
}

header{
  display:flex; justify-content:space-between;
  padding:12px 24px; margin-bottom:5px; box-shadow:0 0 4px 1px $theme;
  font-size:1.5em;
}
footer{line-height:30px; border-top:1px solid $theme; font-size:12px; text-align:center; color:#999;}
.max-10{max-width:10em; overflow:hidden; text-overflow:ellipsis;}

.content{height:calc(100% - 31px - 24px - 5px - 30px);}

.list{
  float:left; width:33.33%; height:100%; text-align:center;
  border-right:1px solid $theme;
  &:last-child{border:none;}
  &-title{display:flex; align-items:center; height:55px; justify-content:center;
    border-bottom:1px solid $theme;
    &-icon{width:3em; margin-right:12px;}
    &-label{font-size:1.2em; font-weight:bold;}
  }
  &-items{height:100%; overflow-y:scroll; @extend %srollbar; padding:32px 12px 0; position:relative;
    &-weightOp{display:flex; justify-content:flex-end; align-items:center; height:30px; padding-right:10px;
      position:absolute; top:0; left:0; right:0;
    }

    $code-width:12px;
    code{width:$code-width; height:$code-width; border-radius:50%; opacity:.5; cursor:pointer; transition:.4s; display:inline-block;}
    code:hover, code[active]{opacity:1;}
    code+code{margin-left:5px;}
    code[high]{background:#f44336;}
    code[middle]{background:#2196f3;}
    code[low]{background:#4caf50;}
    code[all]{background:#9e9e9e;}

    &-item{padding:5px; cursor:pointer; transition:.4s;
      display:flex; justify-content:flex-start; align-items:center;
      border-top-right-radius:200px;
      border-bottom-right-radius:30px;

      code{margin-right:10px;}
      span{flex:1; text-align:left;}

      &:hover{background:#98cdec;}
    }
    &-item+&-item{margin-top:15px;}
  }
}

.manage{
  $form-width:666px;
  .el-dialog{width:$form-width}
  &-context{position:relative;
    &-form{
      width:100%; position:relative;
      .el-input{width:100% !important;}
      .el-select{width:95% !important;}
      .addMail{font-size:16px; color:#2196f3; margin-left:10px; cursor:pointer;}
    }
  }
}
